<template>
  <div
    class="international"
    @click="handleSetLanguage"
  >
    <div>
      <svg-icon class-name="international-icon" icon-class="language" />
    </div>
    <!-- <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language === 'zh'" command="zh">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language === 'en'" command="en">
        English
      </el-dropdown-item>
      <el-dropdown-item :disabled="language === 'es'" command="es">
        Español
      </el-dropdown-item>
      <el-dropdown-item :disabled="language === 'ja'" command="ja">
        日本語
      </el-dropdown-item>
    </el-dropdown-menu> -->
  </div>
   
</template>

<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language;
    },
  },
  methods: {
    handleSetLanguage() {
      let lang = ''
      if(this.$i18n.locale=='en'){
        lang='zh'
      }else{
        lang='en'
      }
      this.$i18n.locale = lang;
      this.$store.dispatch("app/setLanguage", lang);
      this.$message({
        message: "Switch Language Success",
        type: "success",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.international {
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
  color: #5a5e66;
}
</style>
